<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-01-24 17:08:11
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-04-02 15:13:05
 * @Description:故障信息面板
-->
<template>
  <pure-card class="max-height" :disabled="disabled" :show-expand="showExpand">
    <div slot="header">故障信息
      <span v-if="formData.createUser" class="createUser">建单人:
        <span>
          {{ formData.createUser | staffId }}
        </span>
      </span>
    </div>
    <div slot="subHeader">
      <span
        v-if="formData.createTime"
        class="createTime"
      >
        建单时间:
        <span>{{ formData.createTime }}</span>
      </span></div>
    <el-form
      ref="form"
      :model="formData"
      label-position="right"
      label-width="102px"
      size="mini"
      :disabled="disabled"
      :rules="rules"
    >
      <el-form-item label="来源">
        <dic-select v-model="formData.source" dic-key="faultSource" :disabled-list="disabledSourceList" />

      </el-form-item>
      <el-form-item v-if="!disabled" label="指派人员">
        <el-input
          ref="sendUserInput"
          v-model="selectedSendEngineer.name"
          style="width: auto"
          :disabled="isDealBySelf"
          @focus="handleOpenEngineerPanel"
        />
        <el-checkbox
          class="ml-16"
          :value="isDealBySelf"
          @change="handleDealByself"
        >由我处理</el-checkbox>
      </el-form-item>
      <el-form-item label="故障分类" prop="faultType">
        <fault-type-select
          v-model="formData.faultType"
          style="width: 100%"
          @change="onFaultTypeChange"
        />
      </el-form-item>
      <el-form-item label="故障描述" prop="faultRemark">
        <el-autocomplete
          v-model="formData.faultRemark"
          :debounce="1000"
          type="textarea"
          value-key="title"
          :rows="2"
          :fetch-suggestions="querySearch"
          style="width:calc(100% - 0px); text-align: left;margin-right:5px;"
          @select="onSelectSuggestionKnowledge"
        />
      </el-form-item>
      <el-form-item label="详细说明">
        <el-input v-model="formData.detailInfo" type="textarea" :rows="4" />
      </el-form-item>

      <el-form-item label-width="0px" class="form-item-wrapper">
        <el-row>
          <el-col :span="12">
            <el-form-item label="预计工时" prop="reqTime">
              <el-input
                v-model="formData.reqTime"
                style="width: 80%"
                placeholder=""
                @input="onInputReqTime"
              />
              <span class="unit">小时</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间" label-width="95px" prop="completeTime">
              <el-date-picker
                v-model="formData.completeTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                align="right"
                :prefix-icon="'null'"
                :clear-icon="'null'"
                class="date-picker"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="紧急程度">
        <dic-radio v-model="formData.degree" dic-key="gradeUrgency" type="string" />
      </el-form-item>
      <el-form-item label="影响范围">
        <dic-radio v-model="formData.rangeType" dic-key="faultScope" type="string" />
      </el-form-item>
      <el-form-item label-width="0px" class="form-item-wrapper">
        <el-row>
          <el-col :span="13">
            <el-form-item label="响应类型">
              <dic-radio v-model="formData.responseType" dic-key="responseType" type="string" />
            </el-form-item>
          </el-col>
          <el-col v-if="formData.responseType === '2'" :span="11">
            <el-form-item label="预约时间" label-width="95px" prop="appointment">
              <el-date-picker
                v-model="formData.appointment"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                align="right"
                :prefix-icon="'null'"
                :clear-icon="'null'"
                class="date-picker"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form-item>
      <el-form-item label="附件">
        <el-col :span="22">
          <upload v-model="formData.enclosure" />
        </el-col>
      </el-form-item>

    </el-form>
  </pure-card>
</template>

<script>
import DicSelect from '@/feat/system/dictionary/normal/component/dicSelect.vue';
import DicRadio from '@/feat/system/dictionary/normal/component/dicRadio.vue';
import {
  cloneDeep,
  omitBy,
  isNil,

} from 'lodash';
import {
  mapGetters,
} from 'vuex';
import {
  limitNumberAfterPoint,
} from '@/utils/validator';
import EngineerPanel from '@/views/components/engineer/engineerPanel.vue';
import KnowledgeBaseRetrievalApi from '@/apis/knowledgeBase/retrieval/index';
export default {
  name: 'TicketFaultInfoPanel',
  components: {
    DicSelect,
    DicRadio,
    FaultTypeSelect: () => import('@/views/reportFault/sharedComponents/select/faultTypeSelect.vue'),
    Upload: () => import('@/components/upload'),
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    fault: {
      type: Object,
      default: function () {
        return {};
      },
    },
    showExpand: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'byManual',
    },
  },
  data() {
    return {
      formData: {
        // 建单人
        createUser: null,
        // 建单时间
        createTime: null,
        // 来源
        source: this.type === 'byManual' ? 3 : 1,
        // 故障分类
        faultType: null,
        // 故障描述
        faultRemark: null,
        // 详细说明
        detailInfo: null,
        // 预计工时
        reqTime: null,
        // 完成时间
        completeTime: null,
        // 紧急程度
        degree: '3',
        // 影响范围
        rangeType: '1',
        // 响应类型
        responseType: '1',
        // 预约时间
        appointment: null,
        // 附件
        enclosure: null,
      },
      // 指派人员信息
      selectedSendEngineer: { name: null,
        engineerId: null,
        isTeam: false,
        teamId: null,
      },
      rules: {
        faultType: [
          { required: true, message: '请选择故障分类', trigger: 'change', }
        ],
        faultRemark: [
          { required: true, message: '请输入故障描述', trigger: 'blur', }
        ],
        reqTime: [
          {
            type: 'string', required: process.env.VUE_APP_REQUIRED_REQ_TIME === 'True', trigger: 'blur', validator: limitNumberAfterPoint('请输入预计工时', 1),
          }
        ],
        completeTime: [{
          required: false, trigger: 'change', message: '请选择完成时间',
        }],
        appointment: [
          {
            required: true, message: '请选择预约时间', trigger: 'change',
          }
        ],
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
    isDealBySelf() {
      if (!this.selectedSendEngineer.engineerId) {
        return false;
      }
      if (!this.selectedSendEngineer.isTeam && this.selectedSendEngineer.engineerId === this.userInfo.id) {
        return true;
      }
      return false;
    },
    disabledSourceList() {
      if (this.type === 'byManual') {
        return [1, 4];
      } else {
        return [];
      }
    },
  },
  watch: {
    fault: {
      handler(val) {
        this.formData = Object.assign({}, this.formData, omitBy(val, isNil));
      },
      deep: true,
    },
  },
  async created() {
  },
  methods: {
    async handleOpenEngineerPanel() {
      this.$refs.sendUserInput.blur();
      this.$innerDrawer({
        width: '548px',
        component: () => <EngineerPanel onDone={this.onSelectEngineer} defaultSelectedData={this.selectedSendEngineer}/>,
      });
    },
    onSelectEngineer(data) {
      this.$refs.sendUserInput.blur();
      this.selectedSendEngineer = Object.assign({}, data);
      this.$refs.sendUserInput.blur();
    },
    onFaultTypeChange(newVal) {
      this.formData.reqTime = '1';
    },
    async check() {
      await this.$refs['form'].validate();
      const data = cloneDeep(this.formData);
      data.sendType = 2;
      if (this.selectedSendEngineer.isTeam) {
        data.sendTeam = this.selectedSendEngineer.teamId;
      } else {
        data.sendUser = this.selectedSendEngineer.engineerId;
        data.sendTeam = this.selectedSendEngineer.teamId;
        if (data.sendUser === this.userInfo.id) {
          data.sendType = 1;
        }
      }
      return data;
    },
    onInputReqTime(value) {
      this.formData.reqTime = value.replace(/[^0-9.]/g, '');
    },
    handleDealByself(val) {
      if (val) {
        this.formData.sendUser = this.userInfo.id;
        this.selectedSendEngineer = Object.assign({}, {
          engineerId: this.userInfo.id,
          name: this.userInfo.name,
          isTeam: false,
        });
        this.formData.sendType = 1;
      } else {
        this.selectedSendEngineer = Object.assign({}, {
        });
        this.formData.sendType = 2;
      }
    },
    onSelectSuggestionKnowledge(item) {
      this.formData.detailInfo = item.question;
      this.formData.faultRemark = item.title;
      this.formData.learningId = item.id;
    },
    async querySearch(queryString, cb) {
      const { list, } = await KnowledgeBaseRetrievalApi.list({
        query: queryString,
        pageSize: 9999,
        type: this.formData.faultType,
      });
      cb(list);
    },
  },
};
</script>

<style lang="scss" scoped>
  .createUser,.createTime {
     color: #879bba;
        font-size: $--pure-little-font-size;
        span {
            font-weight: 400;
            color: #2d405e;
        }
  }
  .disabled {
    background: #f7f7f7;
  }
  .createUser {
    padding-left: 36px;
  }
  .ml-16 {
    margin-left: 16px;
  }
  .date-picker {
    width: 100%;
   ::v-deep .el-input__inner{
     padding:0 16px;
   }
  }
   .form-item-wrapper {
        padding: 0;
        margin-bottom: 0;
        .el-col-11 {
        padding:0;
    }
    }
</style>
